<template>
  <div class="container">
    <div class="head">
      <div class="opt">
        <el-button type="primary" @click="AddRole()">新增角色</el-button>
      </div>
    </div>
    <el-table :data="List" border style="width: 100%">
      <el-table-column prop="index" label="序号" width="120"></el-table-column>
      <el-table-column prop="roleName" label="角色名称"></el-table-column>
      <!-- <el-table-column prop="remarks" label="备注信息"></el-table-column> -->
      <!-- <el-table-column prop="userName" label="发起人"></el-table-column> -->
      <!-- <el-table-column label="系统内置">
        <template slot-scope="scope">
          <el-button type="text" v-show="scope.row.isSys == 1">是</el-button>
          <el-button type="text" v-show="scope.row.isSys == 0">否</el-button>
        </template>
      </el-table-column>-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleInfo(scope.row)">查看权限</el-button>
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" @click="handleDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="paginat">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage4"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 修改权限 -->
    <!-- :default-checked-keys="defaultList" default-expand-all :default-expanded-keys="expendList"-->
    <el-dialog title="修改权限" @close="exCancel" :visible.sync="dialogVisible" width="20%">
      <div>
        <el-tree
          :data="RoleList"
          show-checkbox
          ref="tree"
          node-key="menuId"
          default-expand-all
          :default-checked-keys="defaultList"
          :props="defaultProps"
        ></el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="exCancel()">取 消</el-button>
        <el-button type="primary" @click="submitGrant()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 新增角色 -->
    <el-dialog title="新增角色" @close="Cancel" :visible.sync="dialogRole" width="30%">
      <!-- :rules="rules" -->
      <el-form
        :model="ruleFormRole"
        ref="ruleFormRole"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="ruleFormRole.roleName" placeholder="请输入角色名称"></el-input>
        </el-form-item>

        <div style="text-align:right;">
          <el-button @click="dialogRole = false">取 消</el-button>
          <el-button type="primary" @click.native="addRoleClick('ruleFormRole')">确 定</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      List: [],
      total: 0,
      val: 1, //当前多少页
      currentPage4: 1,
      dialogRole: false,
      editId: "",
      flag: "",
      ruleFormRole: {
        roleName: ""
      },
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { max: 20, message: "输入内容过长", trigger: "blur" }
        ]
      },
      defaultProps: {
        children: "menuList",
        label: "menuName"
      },
      RoleList: [], //角色列表
      expendList: [], //默认展开
      defaultList: [], //默认勾选
      exChangeId: "",
      params: []
    };
  },
  created() {
    this.getRoleList();
    this.getList();
  },
  methods: {
    //编辑
    handleEdit(row) {
      this.dialogRole = true;
      this.editId = row.roleId;
      (this.ruleFormRole.roleName = row.roleName), (this.flag = 2);
    },
    //删除
    handleDel(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url = "/sysRole/edit";
          let params = {
            roleId: row.roleId,
            status: 1
          };
          this.httpPost(url, params, res => {
            if (res.code == 200) {
              this.$message({
                message: "删除成功",
                type: "success"
              });
              this.getList();
            } else {
              this.$message({
                message: res.message,
                type: "warning"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //取消
    Cancel() {
      this.dialogRole = false;
      this.ruleFormRole = {};
    },
    //新增角色
    AddRole() {
      this.ruleFormRole = {};
      this.dialogRole = true;
      this.flag = 1;
    },
    //新增角色确定
    addRoleClick(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.flag == 1) {
            let url = "/sysRole/add/" + this.ruleFormRole.roleName;
            this.httpGet(url, res => {
              if (res.code == 200) {
                this.$message({
                  message: "新增成功",
                  type: "success"
                });
                this.getList();
              } else {
                this.$message({
                  message: res.message,
                  type: "warning"
                });
              }
              this.dialogRole = false;
            });
          } else {
            let url = "/sysRole/edit";
            let params = {
              roleId: this.editId,
              status: 0,
              roleName: this.ruleFormRole.roleName
            };
            this.httpPost(url, params, res => {
              if (res.code == 200) {
                this.$message({
                  message: "编辑成功",
                  type: "success"
                });
                this.getList();
              } else {
                this.$message({
                  message: res.message,
                  type: "warning"
                });
              }
              this.dialogRole = false;
            });
          }
        }
      });
    },
    //获取权限
    getRoleList() {
      let url = "/sysMenu/findList";
      this.httpGet(url, res => {
        if (res.code == 200) {
          this.RoleList = res.data;
        }
      });
    },
    // 查看每一个权限
    handleInfo(row) {
      this.dialogVisible = true;
      this.exChangeId = row.roleId;
      let url = "/sysRole/findRoleIdMenu/" + row.roleId;
      this.httpGet(url, res => {
        if (res.code == 200) {
          let menuList = res.data;
          menuList.forEach((element, index) => {
            // if (element["show"] == 1) {
            element.menuList.forEach((value, i) => {
              if (value["show"] == 1) {
                //新增
                this.defaultList.push(value.menuId);
                this.$refs.tree.setCheckedKeys(this.defaultList);
              }
            });
            // }
          });
        }
      });
    },
    //修改权限清除
    exCancel() {
      this.dialogVisible = false;
      // //清空树
      this.$refs.tree.setCheckedKeys([]);
      // //清空params
      this.params.length = 0;
      this.defaultList = [];
    },
    //树确定
    submitGrant() {
      let child = this.$refs.tree.getCheckedKeys();
      let father = [5, 7, 11, 14, 16];
      let ridList = child.concat(father);
      console.log(child);
      console.log(father);
      console.log(ridList);

      let hash = [];
      for (var i = 0; i < ridList.length; i++) {
        if (hash.indexOf(ridList[i]) == -1) {
          hash.push(ridList[i]);
        }
      }

      console.log(hash);
      hash.forEach(element => {
        let obj = {};
        obj["roleId"] = this.exChangeId;
        obj["menuId"] = element;
        this.params.push(obj);
      });
      let url = "/sysRole/editRoleMenu";
      this.httpPost(url, this.params, res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "更改成功"
          });
        } else {
          this.$message({
            type: "danger",
            message: "更改失败"
          });
        }
        //清空树
        this.$refs.tree.setCheckedKeys([]);
        this.defaultList = [];
        this.dialogVisible = false;
        //清空params
        this.params.length = 0;
      });
    },

    // 获取列表
    getList() {
      let url = "/sysRole/getList";
      let params = {
        pageNum: this.val,
        pageSize: 10
      };
      this.httpPost(url, params, res => {
        if (res.code == 200) {
          this.List = res.data.list;
          this.total = res.data.total;
          this.List.forEach((element, i) => {
            this.List[i].index = (this.val - 1) * 10 + i + 1;
          });
        }
      });
    },
    //分页
    handleCurrentChange(val) {
      this.val = val;
      this.getList();
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style scoped>
.head {
  height: 60px;
  width: 100%;
}
</style>